<template>
    <div>

        <el-form ref="form" :model="formData"  :label-width="formLabelWidth">

            <el-form-item label="服务器名" :error="joinToString(formErrors.name||'')" >

                <el-row>
                    <el-col :span="12" :xs="24"><el-input v-model="formData.name"></el-input></el-col>
                    <el-col :span="12" :xs="0"></el-col>
                </el-row>
            </el-form-item>

            <el-form-item label="文件上传temp" :error="joinToString(formErrors.docker_api_pem_cert||'')"
                          prop="docker_api_pem_cert">

                <el-col :span="12" :xs="24">
                    <input-files :data-file="formData.docker_api_pem_cert" file-connector="temp"></input-files>
                </el-col>
                <el-col :span="12" :xs="0"></el-col>
            </el-form-item>
            <el-form-item label="文件上传editor" :error="joinToString(formErrors.docker_api_pem_key||'')"
                          prop="docker_api_pem_key">

                <el-col :span="12" :xs="24">
                    <input-files :data-file="formData.docker_api_pem_key" file-connector="editor" v-on:change="changeDockerApiPemKey"></input-files>
                </el-col>
                <el-col :span="12" :xs="0"></el-col>
            </el-form-item>
            <el-form-item label="图片验证码" >

                <el-col :span="12" :xs="24">
                    <input-captcha-image v-on:change="captchaImageChange"></input-captcha-image>
                </el-col>
                <el-col :span="12" :xs="0"></el-col>
            </el-form-item>
            <el-form-item label="邮箱地址" >

                <el-row>
                    <el-col :span="12" :xs="24"><el-input v-model="formData.email"></el-input></el-col>
                    <el-col :span="12" :xs="0"></el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="邮箱验证码">

                <el-col :span="12" :xs="24">
                    <input-captcha-email :send-to="formData.email" v-on:change="captchaEmailChange"></input-captcha-email>
                </el-col>
                <el-col :span="12" :xs="0"></el-col>
            </el-form-item>
            <el-form-item label="手机号" >

                <el-row>
                    <el-col :span="12" :xs="24"><el-input v-model="formData.mobile"></el-input></el-col>
                    <el-col :span="12" :xs="0"></el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="手机验证码">

                <el-col :span="12" :xs="24">
                    <input-captcha-sms :send-to="formData.mobile" v-on:change="captchaMobileChange"></input-captcha-sms>
                </el-col>
                <el-col :span="12" :xs="0"></el-col>
            </el-form-item>
            <el-form-item label="富文本">

                <input-rich-editor file-connector="temp" value="abc" v-on:change="contentChange"></input-rich-editor>
            </el-form-item>


            <el-form-item label="">
                <el-button type="primary" @click="submit">保存</el-button>

            </el-form-item>
        </el-form>

    </div>

</template>

<script>

    export default {
        components: {
        },
        props: {
            dataEntity: {
                type: Object,
                default: null
            },
            statusOptions: {
                type: Array,
                default: function () {
                    return []
                }
            },
            envTypeOptions: {
                type: Array,
                default: function () {
                    return []
                }
            },
            typeOptions: {
                type: Array,
                default: function () {
                    return []
                }
            },
            regionOptions: {
                type: Array,
                default: function () {
                    return []
                }
            },
            firewallOptions: {
                type: Array,
                default: function () {
                    return []
                }
            },
        },
        data() {


            return {
                formLabelWidth: window.formLabelWidth,
                formData: {},
                formErrors: {},


            }
        },
        created() {
            this.assignData(this.dataEntity);
            //console.log(this);
        },
        mounted() {
            let _this = this;

        },
        methods: {
            assignData: function (data) {
                if (LeUtils.typeIs('object', data)) {
                    this.formData = Object.assign({}, this.formData, data)
                }
                //this.formData.docker_api_pem_key = 'editor::2020/03/20200322110342_5e76d58e184de.jpg';
            },
            joinToString: function (obj, glue) {
                return LeUtils.joinToString(obj, glue)
            },
            captchaImageChange:function(code_id,code_val){
                this.formData.code_img_id = code_id;
                this.formData.code_img_val = code_val;
            },
            captchaEmailChange:function(code_id,code_val){
                this.formData.code_email_id = code_id;
                this.formData.code_email_val = code_val;
            },
            captchaMobileChange:function(code_id,code_val){
                this.formData.code_mobile_id = code_id;
                this.formData.code_mobile_val = code_val;
            },
            changeDockerApiPemKey:function(val,file){
                this.formData.docker_api_pem_key = val;
            },
            contentChange:function(value,editor){
                this.formData.content= value;
            },


            summaryEditorCallback: function (content) {
                this.formData.summary = content
            },


            submit: function (event) {

                if (event) {
                    event.preventDefault()
                }
                let _this = this;
                console.log(_this.formData)

                this.$refs['form'].validate((valid) => {
                    //console.log(valid);
                    if (valid) {


                        /*_this.formData.docker_api_pem_cert = LeUtils.valueGet(_this.formData,"docker_api_pem_cert_file.path")
                        _this.formData.docker_api_pem_key = LeUtils.valueGet(_this.formData,"docker_api_pem_key_file.path")*/



                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>
